<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>餐厅预定详情</title>
		<script src="__INDEX__/js/mui.min.js"></script>
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/css/index.css" />
		<link rel="stylesheet" href="__INDEX__/css/hykcz.css" />
		<link rel="stylesheet" href="__INDEX__/css/diancan.css" />
	</head>
	<style>
		.mode {
			float: right
		}
		
		.total {
			font-size: 16px;
		}
		
		.dd_del {
			font-size: 14px;
			margin-left:10px
		}
		.dcyy_btn{width:100%;}
		.mui-bar .mui-btn{top: 0px;}
		.dcyy_btn button{height:3.5rem;}
		.top_room{margin: 10px;}
		.room_name{font-size: 16px;}
		.mask{background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none;}
		.phone_box{width: 80%; background: white; margin: 9rem auto 0; border-radius: 3px; padding: 4% 5% 5%;}
		.phonetc_bt{color: #000000; font-weight: bold; font-size: 1rem; margin-bottom: .1rem;}
		.phone_box .wz{font-size: .85rem; line-height: normal; margin-bottom: 1.2rem; color: #666666;}
		.phone_box input{border-color: #811588; padding: 10px; color: #000000; font-size: .85rem;}
		.phone_btn{background: #38ab3c; border: 0; width: 100%; height: 2.5rem; color: white; font-size: 1.1rem; margin-top: .5rem;}
		.phone_box .yzm_input{width: 52%; float: left;}
		.phone_box input{    line-height: 21px;width: 100%;height: 40px; margin-bottom: 15px;padding: 10px 15px;-webkit-user-select: text;border: 1px solid rgba(0,0,0,.2);border-radius: 3px;outline: 0;background-color: #fff; -webkit-appearance: none;}
		.detl{border-bottom: 1px solid #CCCCCC;}
		.detl label{width:40%}
		.detl label~input{width:60%}
		.xhd_list {padding: 1rem 0 0rem;}
		.sign_out{float:right;margin:-2.2rem;border:1px solid #CCCCCC;border-radius: 100px;width:30px;height: 30px;text-align: center;}
	
	</style>

	<body class="mui-ios mui-ios-11 mui-ios-11-0">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">餐厅预定详情</h1>
		</header>

		<div class="mui-content">
			<div class="shoplist_box">
				<ul class="index_sjlist" id="store_ul">
					<li>
						<div class="index_sjimg"><img src="{$vo.thumb}" style='width:100px'></div>
						<div class="index_sjinfo">
							<div class="index_spname">{$vo['store_name']}</div>
							<div class="index_spname">{$vo['area_name']}</div>
						</div>
					</li>
				</ul>
			</div>
			{if $vo.state==1}
			<div style="width: 100%;text-align: center;padding: 6px;">
				<a href="/index/member/diancan?r_id={$vo.id}&store_id={$vo.store_id}"  class=" mui-btn mui-btn-primary" style="width:150px;border: none;padding: 10px;background-color: #2bb6f6;">加菜</a>
				<a href="javascript:$('.queren').show()"  class=" mui-btn mui-btn-primary" style="width:150px;border: none;padding: 10px;background-color: #fac476;">结账</a>
			</div>
			{/if}
			{if $vo.state==3}
			<div style="width: 100%;text-align: center;padding: 6px;">
				<a href="/index/member/diancan?r_id={$vo.id}&store_id={$vo.store_id}"  class=" mui-btn mui-btn-primary" style="width:300px;border: none;padding: 10px;background-color: #2bb6f6;">点餐</a>
			</div>
			{/if}
			<div class="shoplist_box">
				<ul class="index_sjlist order_det">
					<li class='dd_del'>订单信息</li>
					{if $vo.type==2}
					<li>
						<div class="index_spname">订单号：{$vo.order_sn}</div>
						<div class="index_spname">预订人：{$vo.user_name}</div>
						<div class="index_spname">预定手机号：{$vo.mobile}</div>
						<div class="index_spname">预定时间：{if condition="$vo.type eq 1"}{$vo.add_time}{else}{$vo.jc_time}{/if}</div>
					</li>
					{else}
					<li>
						<div class="index_spname">订单号：{$vo.order_sn}</div>
						<div class="index_spname">用户：{$vo.user_name}</div>
						<div class="index_spname">手机号：{$vo.mobile}</div>
						<div class="index_spname">添加时间：{if condition="$vo.type eq 1"}{$vo.add_time}{else}{$vo.jc_time}{/if}</div>
					</li>
					{/if}
					<li class='total'>订单总额：￥{$vo.origin_price}
						<div class='mode'>{$vo.pay_name}</div>
					</li>
					
				</ul>
				<ul class="index_sjlist order_det">
					<li class='dd_del'>订单明细</li>
					<table style="text-align: center;" width="100%">
						<tr>
							<td>菜品名称</td>
							<td>单价</td>
							<td>数量</td>
							<td>小计</td>
						</tr>
						{foreach name="items" item="rs"}
						<tr>
							<td>{$rs.name}</td>
							<td>{$rs.price}</td>
							<td>{$rs.num}</td>
							<td>￥{$rs.num*$rs.price}</td>
						</tr>
						{/foreach}
					</table>
					{if $vo.balance}
					<li class='total'>实际支付金额：￥{$vo.balance}
					</li>
					{/if}
					
				</ul>
			</div>
			 
			
		</div>
		<div class="mask queren">
			<div class="phone_box">
				<p class='sign_out' onclick="javascript:$('.queren').hide()"> X </p>
				<ul class="hycz_list xhd_list">
				<!--购买数据-->
					<li data-val="5">
						<div class="left"><img src="__INDEX__/img/hyk.png" style='width:35px;height：35px' /></div>
						<div class="right">
							<p class="name">会员卡支付</p>
						</div>
					</li>
					<li data-val="2">
						<div class="left"><img src="__INDEX__/img/wx.png" style='width:35px;height：35px' /></div>
						<div class="right">
							<p class="name">微信支付</p>
						</div>
					</li>
				</ul>
				<div class="dcyy_btn"><button type="button" class='que_pay'>确认支付</button></div>
			</div>
		</div>
		
		<script src="__INDEX__/js/jquery.js"></script>
		<script src="__INDEX__/js/jquery.qrcode.js"></script>
		<script src="__INDEX__/js/utf.js"></script>
		<script type="text/javascript" src="__INDEX__/js/layer/layer.min.js"></script>
		<script>
				$(".hycz_list li").click(function(){
					$(".active").removeClass("active");
					$(this).addClass("active");
				})
				$(".que_pay").click(function(){
					var zf_type=$(".active").data("val");
					var balance ="{$user_info.balance}";
					if(zf_type==undefined){
						layer.msg("请选择支付方式");
						return;
					}
					if(zf_type==5){
						if(Number($('#sf_money').val())>Number(balance)){
							layer.msg("会员卡余额不足");
							return;
						}
					}
					var data = {};
					data['zf_type'] = zf_type;
					data['id'] = "{$vo.id}";
					$.ajax({
						type: "get",
						url:  'reserve_pay',
						data: data,
						success: function(date) {
							if(date.code==202){
								window.location.href=date.url;
							}else{
								layer.msg(date.msg);
								if(date.code==200){
									window.location.href='/index/member/reserve';
								}
							}
						}
					})
					
					
				})
		</script>